<template>
  <view class="container">
    <FilterNavbar
      :searchList="searchList"
      :group="[
        { title: '工单筛选', start: 0, end: 5 },
        { title: '订单筛选', start: 5, end: 14 },
      ]"
      v-model:queryParam="queryParam"
      @confirm="onFilterNavbarConfirm"
    >
      <template #center>
        <view class="navbar-title"> 工单管理 </view>
      </template>
    </FilterNavbar>
    <view class="work_types">
      <view class="subsection"><ve-subsection :list="workTypeList" activeColor="#3072F6" :current="current" @change="topTabsClick" /></view>
    </view>
    <ve-search-bar placeholder="工单号/订单号/车牌号/工单负责人" :model-value="queryParam.codeAll" @search="searchBarSearch" />
    <view class="tlts filter_title">
      <view class="tlt_c">工单快捷筛选</view>
      <view class="tlt_r">
        <image class="icon-img" src="../../../static/icons/workorder_icon.png" mode="widthFix" />
        <span class="tlt_name" @click="toTip">工单操作流程</span>
      </view>
    </view>
    <view class="manager-tabs" v-if="isActived != -1">
      <ve-tabs :actived="isActived" :list="tablists" @change="tabsChange"></ve-tabs>
    </view>
    <view class="tlt-line"></view>
    <view class="tlts">
      <view class="tlt_c">订单快捷筛选</view>
      <scroll-view class="tags" scroll-x="true">
        <view v-for="(i, index) in orderTablists" :key="index" :class="['tags-i', i.check ? 'tag_active' : '']" @click="orderTabsChange(i)">
          {{ i.label }}({{ i.num }})
        </view>
      </scroll-view>
    </view>

    <scroll-view
      scroll-y
      :scroll-top="scrollTop"
      :scroll-with-animation="true"
      refresher-enabled
      :refresher-triggered="refreshStatus"
      :enable-back-to-top="true"
      @refresherrefresh="resetRefresh(true)"
      @scrolltolower="reachBottom"
    >
      <view class="record-list">
        <block v-for="item in (dataSource as any)" :key="item">
          <ve-card @click="toDetails(item)">
            <view class="card-tlt">
              <view class="tag" :style="'background:' + (item.workType == 1 ? '#FF7D00' : item.workType == 2 ? '#3491FA' : '#722ED1')">
                {{ item.workType == 1 ? '交车' : item.workType == 2 ? '还车' : '换车' }}
              </view>
              <view class="tlt" @longpress.stop="copy(item.workCode)" @click.stop="click(item)" @touchend="touchend">
                {{ item.workCode || '-' }}
              </view>
              <view class="sta">{{ item.statusName || '-' }}</view>
            </view>

            <ve-cell label="关联订单信息">
              <div>
                {{ item.orderInfo.orderTypeName || '-' }} | {{ item.orderInfo.channelTypeName || '-' }} |
                {{ item.orderInfo.orderStatusName || '-' }}
                <div
                  class="order_no"
                  @longpress.stop="copy(item.orderInfo.channelType ? item.orderInfo.channelOrderCode : item.orderInfo.orderCode)"
                  @click.stop="toOrder(item.orderInfo.orderType, item.orderInfo.id)"
                  @touchend="touchend"
                >
                  {{ item.orderInfo.channelType ? item.orderInfo.channelOrderCode : item.orderInfo.orderCode }}
                  <image class="more_icon" src="../../../static/icons/icon-more.png" mode="widthFix" />
                </div>
              </div>
            </ve-cell>
            <ve-cell label="承租人">
              <view
                @longpress.stop="copy(item.orderInfo.memberName + '' + item.orderInfo.memberPhone)"
                @click.stop="toPhone(item.orderInfo.memberPhone)"
                @touchend="touchend"
              >
                {{ item.orderInfo.memberName || '-' }} | {{ item.orderInfo.memberPhone || '-' }}
                <ve-icon name="tel_1" color="#3072f6" size="28" v-if="item.orderInfo.memberPhone" />
              </view>
            </ve-cell>
            <ve-cell label="车辆信息" v-if="item.workType == 1 || item.workType == 2">
              <div @longpress.stop="copy(item.carLicenseNo)" @click.stop="click(item)" @touchend="touchend">
                {{ item.carLicenseNo || '-' }}
                <ve-tag color="red" :title="item.workCarLabel" v-if="item.workCarLabel" />
                <div>{{ item.carModelName || '-' }}</div>
              </div>
            </ve-cell>
            <ve-cell label="换上车信息" v-if="item.workType == 3">
              <div @longpress.stop="copy(item.carLicenseNo)" @click.stop="click(item)" @touchend="touchend">
                {{ item.carLicenseNo || '-' }}
                <ve-tag color="red" :title="item.workCarLabel" v-if="item.workCarLabel" />
                <div>{{ item.carModelName || '-' }}</div>
              </div>
            </ve-cell>
            <ve-cell label="换下车信息" v-if="item.workType == 3">
              <div @longpress.stop="copy(item.replacedCarLicenseNo)" @click.stop="click(item)" @touchend="touchend">
                {{ item.replacedCarLicenseNo || '-' }}
                <ve-tag color="red" :title="item.replacedCarLabel" v-if="item.replacedCarLabel" />
                <div>{{ item.replacedCarModelName || '-' }}</div>
              </div>
            </ve-cell>
            <ve-cell label="取车门店">{{ item.orderInfo.siteName || '-' }}</ve-cell>
            <ve-cell label="取车方式" v-if="item.workType == 1 || item.workType == 2">{{
              item.orderInfo.sendServiceFlag == 0 ? '到店取车' : '上门送车'
            }}</ve-cell>

            <ve-cell label="交车人" v-if="item.workType == 2 || item.workType == 3">{{ item.workOperatorName || '-' }}</ve-cell>
            <ve-cell label="还车门店" v-if="item.workType == 2 || item.workType == 3">{{ item.orderInfo.returnSiteName || '-' }}</ve-cell>
            <ve-cell label="还车方式" v-if="item.workType == 2">{{ item.orderInfo.returnServiceFlag == 1 ? '上门取车' : '-' }}</ve-cell>
            <ve-cell label="还车人" v-if="item.workType == 3">{{ item.orderInfo.returnStaffName || '-' }}</ve-cell>

            <ve-cell label="预计取车时间" v-if="item.workType == 1">{{ item.orderInfo.startTime || '-' }}</ve-cell>
            <ve-cell label="实际取车时间" v-if="item.orderInfo.actualStartTime && item.workType == 1">{{
              item.orderInfo.actualStartTime || '-'
            }}</ve-cell>

            <ve-cell label="预计还车时间" v-if="item.workType == 2">{{ item.orderInfo.endTime || '-' }}</ve-cell>
            <ve-cell label="实际还车时间" v-if="item.orderInfo.actualEndTime && item.workType == 2">{{
              item.orderInfo.actualEndTime || '-'
            }}</ve-cell>

            <ve-cell label="预计租赁周期" v-if="item.workType == 3">{{ item.orderInfo.startTime }} - {{ item.orderInfo.endTime }}</ve-cell>

            <ve-cell label="备注">
              <view class="get_more">
                <view>{{ item.orderInfo.remark || '-' }}</view>
                <view
                  v-if="item.orderInfo.remark"
                  style="color: #3072f6;margin:0 20rpx"
                  @click.stop="showRemarkModal(item.orderInfo)"
                  >更多</view
                >
              </view>
            </ve-cell>
            <ve-cell label="工单负责人">
              <view v-if="!item.workOperatorPhone && !item.workOperatorPhone">-</view>
              <view v-else @click.stop="toPhone(item.workOperatorPhone)">
                {{ item.workOperatorName || '-' }} | {{ item.workOperatorPhone || '-' }}
                <ve-icon name="tel_1" color="#3072f6" size="28" v-if="item.workOperatorPhone" />
              </view>
            </ve-cell>
            <block v-if="item.status == 6 && item.workSonStatus == 33">
              <ve-cell>
                <view class="no_res">已拒绝</view>
              </ve-cell>
              <ve-cell label="拒绝原因">
                <view class="get_more">
                  <view>{{ item.refuseWorkReason || '-' }}</view>
                  <view
                    v-if="item.refuseWorkReason && item.refuseWorkReason.length > 15"
                    style="color: #3072f6"
                    @click.stop="toMore(item.refuseWorkReason)"
                    >查看更多</view
                  >
                </view>
              </ve-cell>
            </block>
            <block v-if="item.workSonStatus && (item.workSonStatus == 31 || item.workSonStatus == 32)">
              <ve-cell>
                <view class="no_res_reassignment">{{ item.workSonStatusName }}</view>
              </ve-cell>
              <ve-cell label="改派原因">
                <view class="get_more">
                  <view>{{ item.refuseReassignmentReason || '-' }}</view>
                  <view
                    v-if="item.refuseReassignmentReason && item.refuseReassignmentReason.length > 15"
                    style="color: #3072f6"
                    @click.stop="toMore(item.refuseReassignmentReason)"
                    >查看更多</view
                  >
                </view>
              </ve-cell>
            </block>
            <ve-operate-list :operates="operates" operate-storagekey="workOrder_operate_record" :record="item" :staticNum="staticNum" />
          </ve-card>
        </block>
        <!-- 加载结束列表为空时展示 -->
        <ve-empty v-if="dataSource.length == 0 && loadStatus == 'nomore'"></ve-empty>
        <!-- 底部加载状态 -->
        <ve-load-more v-else :status="loadStatus" bgColor="#F7F7F9"></ve-load-more>
      </view>
    </scroll-view>
    <ve-bottom-box v-if="userInfoMsg.employeeId && userInfoMsg.carHouseKeepOpen == 1 && userInfoMsg.isSiteCarHouseKeep == 1">
      <ve-button type="primary" @click="createChangeWork" style="width: 100%">创建换车单</ve-button>
    </ve-bottom-box>
    <refuseModal ref="refuseModalRef" @ok="hotUpdate"></refuseModal>
    <closeModal ref="closeModalRef" @ok="hotUpdate"></closeModal>
    <!-- 生成电子合同 -->
    <generate-contract-popup ref="generateContractPopupRef" />
  </view>
</template>

<script setup lang="ts">
  import dayjs from 'dayjs'
  import { onLoad } from '@dcloudio/uni-app'
  import { updateUser } from '@/api/common/login'
  import FilterNavbar from '@/components/FilterNavbar'
  import { computed, ref, nextTick } from 'vue'
  import { usePageDict } from '@/hooks/useDict'
  import useList from '@/hooks/useList'
  import { getStatisticsAPI, acceptWorkAPI, goHandleAPI } from '@/api/order/workOrder'
  import { serializeUrlParams } from '@/utils'
  import { usePermission } from '@/hooks/usePermission'
  import { http } from '@/utils/http'
  import { useSysDict } from '@/hooks/useDict'
  import refuseModal from './form/refuse-modal.vue'
  import closeModal from './form/close-modal.vue'
  import generateContractPopup from '@/pages/order/components/generate-contract-popup'
  const sysDict = useSysDict(['short_order_channel_type', 'short_order_acquisition_type'])
  const userInfoMsg = ref({}) //用户信息
  const dict = usePageDict('syncWorkOrderDict')
  const fffmove = ref(8)
  const topTabsIndex = ref(0)
  const staticNum = ref(3)
  const current = ref(0)
  const isActived = ref(-1) //默认选中状态
  const orderisActived = ref(0) //订单默认选中状态
  const ischeckLabel = ref(null) //订单默认选中字段
  const islongPress = ref(false)
  const codeAll = ref(null)
  const queryStatusList = ref(null)
  const switchTipOpen = ref(false)
  const isSiteCarHouseKeep = ref()
  const adminEmployeeId = ref()
  const topTabs = ref([
    { label: '全部', value: '0' },
    { label: '交车工单', value: '1' },
    { label: '还车工单', value: '2' },
    { label: '换车工单', value: '3' },
  ])

  const refuseModalRef = ref()
  const closeModalRef = ref()
  const workTypeList = ref([
    {
      name: '全部',
    },
    {
      name: '交车工单',
    },
    {
      name: '还车工单',
    },
    {
      name: '换车工单',
    },
  ])

  // 复制
  const copy = (e) => {
    islongPress.value = true
    uni.setClipboardData({
      data: e,
      success: function () {
        toast('已复制')
      },
    })
  }
  const click = (i) => {
    if (islongPress.value == false) {
      // console.log("不是长按事件");
      toDetails(i)
    } else if (islongPress.value == true) {
      // console.log("长按事件");
    }
  }
  const touchend = () => {
    //延时执行为了防止 click() 还未判断 islongPress 的值就被置为 fasle
    setTimeout(() => {
      islongPress.value = false
    }, 200)
  }

  // 切换样式
  const topTabsClick = (index) => {
    queryParam.value.workTypeList = index != 0 ? [index] : undefined
    if (tablists.value[isActived.value].value) {
      queryParam.value.statusList = tablists.value[isActived.value].value ? [tablists.value[isActived.value].value] : undefined
    } else {
      queryParam.value.statusList = undefined
    }
    resetRefresh()
    getCountData(queryParam.value)
  }

  // 工单快捷筛选项
  const tablists = ref([
    { label: '待处理', value: '2', prop: 'waitAcceptanceCount', num: 0 },
    { label: '待开始', value: '3', prop: 'waitStartCount', num: 0 },
    { label: '待审核改派', value: '3', prop: 'waitReviewAndReassignment', num: 0 },
    { label: '进行中', value: '4', prop: 'inProgressCount', num: 0 },
    { label: '已完成', value: '5', prop: 'completedCount', num: 0 },
    { label: '已关闭', value: '6', prop: 'closedCount', num: 0 },
    { label: '全部', value: '', prop: 'total', num: 0 },
  ])

  // 订单快捷筛选项
  const orderTablists = ref([
    { label: '今日交车', value: '2', prop: 'giveToday', num: 0, check: false },
    { label: '今日还车', value: '3', prop: 'returnToday', num: 0, check: false },
    { label: '明日交车', value: '3', prop: 'giveTomorrow', num: 0, check: false },
    { label: '明日还车', value: '4', prop: 'returnTomorrow', num: 0, check: false },
  ])

  // 查看更多
  const toMore = (e) => {
    uni.showModal({
      content: e,
      showCancel: false,
    })
  }
  // 跳转更多备注页面
  const showRemarkModal = ({ id, orderType }) => {
    let url = `/pages/order/${orderType == 1 ? 'short-order' : 'long-order'}/remark-list?id=${id}`
    uni.navigateTo({ url })
  }

  // 详情
  const toDetails = (item, url = null) => {
    console.log(item)
    if (usePermission('svmsapp:workOrder.details') && !(item.status == 1 && item.isWorkOperator == 1)) {
      uni.navigateTo({
        url:
          url ||
          '/pages/work/workOrder/detail/index?workOrderId=' +
          // './detail/index?workOrderId=' +
            item.id +
            '&orderId=' +
            item.refId +
            '&workCode=' +
            item.workCode +
            '&orderType=' +
            item.orderInfo.orderType +
            '&status=' + item.status,
      })
    }
  }

  const queryParam = ref({})
  const { resetRefresh, reachBottom, loadData, scrollTop, loadStatus, refreshStatus, dataSource, updateHotUpdateFlag } = useList(
    '/V5/workOrderV5/getPageList',
    queryParam,
  )

  // 热更新
  const hotUpdate = () => {
    // 当前操作的订单ID
    const record = uni.getStorageSync('workOrder_operate_record')
    getCountData(queryParam.value)
    if (record) {
      console.log('需要局部更新的 orderCode:', record.workCode)
      // 获取订单详情
      http({
        method: 'POST',
        url: '/V5/workOrderV5/getPageList',
        data: {
          pageNumber: 1,
          pageSize: 10,
          ...queryParam.value,
          // 用orderCode确认当前订单是够更改状态
          workCode: record.workCode,
        },
      }).then((res) => {
        if (res.code == 200) {
          let { data, total } = res.result
          const index = dataSource.value.findIndex((item) => item.id == record.id)
          if (total > 0 && data.length > 0) {
            const newInfo = data[0]
            // 更新数据
            Object.assign(dataSource.value[index], newInfo)
          } else {
            // 删除数据
            dataSource.value.splice(index, 1)

            // 更新updateFlag
            updateHotUpdateFlag(true)
          }
        }
      })
    }
  }

  // 筛选项
  const searchList = computed(() => {
    return [
      {
        group: 1,
        prop: 'workLabel',
        label: '标签',
        type: 'picker',
        attrs: {
          options: dict.workLabel,
        },
      },
      {
        group: 1,
        prop: 'siteIdList',
        label: '归属门店',
        type: 'remote-select',
        attrs: {
          type: 'site',
          multiple: true,
          required: false,
          params: {
            idList: queryParam.value.siteIdList,
          },
          change: (form, labelForm, searchList, val) => {
            form.value.carModelId = undefined
          },
        },
      },
      // {
      //   group: 1,
      //   prop: 'workOperatorList',
      //   label: '工单负责人',
      //   type: 'remote-select',
      //   attrs: {
      //     type: 'staff',
      //     multiple: true,
      //     params: {
      //       oldIdList: queryParam.value.workOperatorList,
      //     },
      //   },
      // },
      {
        group: 1,
        prop: 'workCompleteIdList',
        label: '工单指派人',
        type: 'remote-select',
        attrs: {
          type: 'get_work_complete',
          multiple: true,
          required: false,
          params: {
            oldIdList: queryParam.value.workCompleteIdList,
          },
        },
      },
      {
        group: 2,
        prop: 'carModelId',
        label: '订单车型',
        type: 'remote-select',
        attrs: {
          type: 'carModel',
        },
      },
      {
        group: 1,
        prop: ['expectEndTimeStart', 'expectEndTimeEnd'],
        label: '工单预计完成时间',
        type: 'daterange-picker',
      },
      {
        group: 1,
        prop: ['startTimeStart', 'startTimeEnd'],
        label: '工单实际开始时间',
        type: 'daterange-picker',
      },
      {
        group: 1,
        prop: ['endTimeStart', 'endTimeEnd'],
        label: '工单实际完成时间',
        type: 'daterange-picker',
      },
      {
        group: 2,
        prop: 'refType',
        label: '订单类型',
        type: 'picker',
        attrs: {
          options: dict.orderType,
        },
      },
      {
        group: 2,
        prop: 'orderSource',
        label: '订单来源',
        type: 'picker',
        attrs: {
          options: dict.orderSourceEnum,
        },
      },
      {
        group: 2,
        prop: 'orderStatus',
        label: '订单状态',
        type: 'picker',
        attrs: {
          options: dict.orderStatus,
          multiple: true,
        },
      },
      {
        group: 2,
        prop: 'orderChanne',
        label: '订单渠道',
        type: 'picker',
        attrs: {
          options: sysDict.short_order_channel_type,
        },
      },
      // {
      //   group: 2,
      //   prop: 'refType',
      //   label: '车牌号',
      //   type: 'picker',
      //   attrs: {
      //     options: dict.orderType,
      //   },
      // },
      {
        group: 2,
        prop: ['orderStartTimeBegin', 'orderStartTimeEnd'],
        label: '预计取车时间',
        type: 'daterange-picker',
      },
      {
        group: 2,
        prop: ['actualStartTimeBegin', 'actualStartTimeEnd'],
        label: '实际取车时间',
        type: 'daterange-picker',
      },
      {
        group: 2,
        prop: ['orderEndTimeBegin', 'orderEndTimeEnd'],
        label: '预计还车时间',
        type: 'daterange-picker',
      },
      {
        group: 2,
        prop: ['actualEndTimeBegin', 'actualEndTimeEnd'],
        label: '实际还车时间',
        type: 'daterange-picker',
      },
    ]
  })

  // 搜索
  const searchBarSearch = (val: any) => {
    queryParam.value = {
      ...queryParam.value,
      codeAll: val ? val : undefined,
    }
    getCountData(queryParam.value)
    resetRefresh()
  }

  // 筛选
  const onFilterNavbarConfirm = (params: any) => {
    queryParam.value = {
      ...queryParam.value,
      ...params,
    }
    resetRefresh()
    getCountData(queryParam.value)
  }

  // 切换tab1
  const tabsChange = (index: any, val: any) => {
    // console.log('val', val)
    if (!val.value) {
      queryParam.value.statusList = undefined
      queryParam.value.workSonStatus = undefined
      // queryParam.value = {}
    } else {
      if (val.value == 3 && val.label == '待审核改派') {
        queryParam.value.statusList = [3]
        queryParam.value.workSonStatus = 31
      } else {
        queryParam.value.statusList = [val.value]
        queryParam.value.workSonStatus = undefined
      }
    }
    isActived.value = index
    resetRefresh()
    getCountData(queryParam.value)
  }

  // 订单快捷筛选
  const orderTabsChange = (e) => {
    // var orderStatusList = queryParam.value.orderLabelList ? queryParam.value.orderLabelList : []
    // orderTablists.value.forEach((i) => {
    //   if (e.prop == i.prop) {
    //     i.check = !i.check

    //     if (orderStatusList.indexOf(i.label) == -1) {
    //       orderStatusList.push(i.label)
    //     } else {
    //       orderStatusList = orderStatusList.filter(item => item !== i.label)
    //     }

    //     queryParam.value.orderLabelList = orderStatusList.length ? orderStatusList : undefined
    //     // console.log('isActived.value', isActived.value)
    //     queryParam.value.statusList = tablists.value[isActived.value].value ? [tablists.value[isActived.value].value] : undefined
    //     // console.log(queryParam.value)
    //     setTimeout(() => {
    //       resetRefresh()
    //       getCountData(queryParam.value)
    //     }, 100)
    //   }
    // })
    var orderStatusList = queryParam.value.orderLabelList ? queryParam.value.orderLabelList : []
    orderTablists.value.forEach((i, index) => {
      if (e.prop == i.prop) {
        i.check = !i.check
        if (i.check) {
          orderStatusList = [i.label]
          queryParam.value.orderLabelList = orderStatusList.length ? orderStatusList : undefined
        } else {
          orderStatusList = []
          queryParam.value.orderLabelList = orderStatusList.length ? orderStatusList : undefined
        }
        queryParam.value.statusList = tablists.value[isActived.value].value ? [tablists.value[isActived.value].value] : undefined
        setTimeout(() => {
          resetRefresh()
          getCountData(queryParam.value)
        }, 100)
      } else {
        i.check = false
      }
    })
  }

  // 工单操作流程
  const toTip = () => {
    uni.navigateTo({
      url: './imgtip',
    })
  }

  // 去订单详情
  const toOrder = (type, id) => {
    if (islongPress.value == false) {
      if (type == 1) {
        if (usePermission('svmsapp:order:short-order.view')) {
          uni.navigateTo({
            url: '/pages/order/short-order/detail/index?id=' + id,
          })
        }
      } else {
        if (usePermission('svmsapp:order:long-order.view')) {
          uni.navigateTo({
            url: '/pages/order/long-order/detail/index?id=' + id,
          })
        }
      }
    }
  }

  // 拨打电话
  const toPhone = (e) => {
    if (islongPress.value == false) {
      uni.makePhoneCall({
        phoneNumber: e,
      })
    }
  }

  // 创建换车单
  const createChangeWork = () => {
    if (usePermission('svmsapp:workOrder.createChangeCarWork')) {
      uni.navigateTo({
        url: './form/createChangeCarWorkOrder',
      })
    }
  }

  // 排车
  // 排车 & 改排
  const platoonCarFn = (record) => {
    if ([10, 100].includes(record.orderInfo.orderStatus)) {
      // 跳转选择车牌号页面
      let orderInfo = {
        id: record.refId,
        // 当前选中的车辆 id
        platoonCarId: record.orderInfo.carId,
        carId: record.orderInfo.carId,
        siteId: record.orderInfo.siteId,
        siteName: record.orderInfo.siteName,
        modelId: record.orderInfo.carModelId,
        modelName: record.orderInfo.carModelName,
        startTime: record.orderInfo.startTime,
        endTime: record.orderInfo.endTime,
        rentDays: record.orderInfo.rentDays,
        carSource: record.orderInfo.carSource,
        carSourceName: record.orderInfo.carSourceName,
        orderSourceName: record.orderInfo.orderSourceName,
        orderAcquisitionTypeName: record.orderInfo.orderAcquisitionTypeName,
      }
      let paramStr = serializeUrlParams({
        mode: 'platoon',
        type: record.orderInfo.orderType == 1 ? 'short-order' : 'long-order',
        data_json: JSON.stringify(orderInfo),
        orderInfo_json: JSON.stringify(orderInfo),
      })
      uni.navigateTo({
        url: `/pages/asset/stock/car-stock/selector?${paramStr}`,
      })
    }
  }

  // 去处理
  const handle = (record, type) => {
    if (record.orderInfo.orderSource == 2 && !record.orderInfo.carId) {
      uni.showModal({
        title: '提示',
        // 自动维护 与 手动维护提示语不同 1：自动 2：手动
        content:
          record.orderInfo.channelOrderMaintenance == 1
            ? '当前车辆为渠道车辆，请先同平台车辆匹配后再处理工单'
            : '当前订单未排车辆，请先给订单排车，再处理工单',
        showCancel: false,
        success: function (res) {
          if (res.confirm) {
            console.log('用户点击确定')
          }
        },
      })
      return false
    }
    if (type == 1) {
      uni.navigateTo({
        url: './form/handleGiveCar?record=' + JSON.stringify(record),
      })
    } else if (type == 2) {
      uni.showModal({
        title: '提示',
        content: '是否处理该还车工单？',
        success: function (res) {
          if (res.confirm) {
            goHandleAPI({ id: record.id, workType: 2 }).then((res) => {
              if (res.code == 200) {
                toast(res.message)
                hotUpdate()
                getCountData(queryParam.value)
              } else {
                toast(res.message)
                return false
              }
            })
          }
        },
      })
    } else if (type == 3) {
      uni.navigateTo({
        url: './form/handleChangeCar?record=' + JSON.stringify(record),
      })
    }
  }

  // 计数
  const getCountData = (params) => {
    // params.statusList = undefined
    getStatisticsAPI(params).then((res) => {
      tablists.value.forEach((navigation) => {
        let prop = navigation.prop
        if (prop) {
          navigation.num = res.result[prop] || 0
        }
      })
      orderTablists.value.forEach((navigation) => {
        let prop = navigation.prop
        if (prop) {
          navigation.num = res.result[prop] || 0
        }
      })
    })
  }

  // 提示
  const toast = (e) => {
    uni.showToast({
      title: e,
      icon: 'none',
    })
  }

  // 手动生成电子合同
  const generateContractPopupRef = ref(null)
  const handleGenerateContract = (record) => {
    generateContractPopupRef.value.show(record, 'workOrder')
  }

  // 按钮操作
  const operates = ref([
    {
      label: '指派负责人', //ok
      permission: 'svmsapp:workOrder.assign',
      show: (record) => record.status == 1 && record.isHousekeepRole == 1 && switchTipOpen.value && adminEmployeeId.value,
      method: (record) => {
        uni.navigateTo({
          url: './form/assignPage?record=' + JSON.stringify(record),
        })
      },
    },

    {
      label: '接受', //ok
      permission: 'svmsapp:workOrder.get',
      show: (record) =>
        record.status == 2 &&
        (((record.workType == 1 || record.workType == 2 || record.workType == 3) &&
          (record.orderInfo.orderSource == 1 || (record.orderInfo.orderSource == 2 && record.orderInfo.channelOrderMaintenance == 2))) ||
          (record.workType == 3 && record.orderInfo.orderSource == 2 && record.orderInfo.channelOrderMaintenance == 1)) &&
        switchTipOpen.value &&
        record.isWorkOperator == 1 &&
        record.workOperatorId &&
        adminEmployeeId.value &&
        record.workSonStatus != 31,
      method: (record) => {
        uni.showModal({
          title: '提示',
          content: '是否接受该工单？',
          success: function (res) {
            if (res.confirm) {
              acceptWorkAPI({ id: record.id }).then((res) => {
                if (res.code == 200) {
                  toast(res.message)
                  hotUpdate()
                  getCountData(queryParam.value)
                } else {
                  toast(res.message)
                  return false
                }
              })
            }
          },
        })
      },
    },
    {
      label: '拒绝', //ok
      permission: 'svmsapp:workOrder.refuse',
      show: (record) =>
        record.status == 2 &&
        (((record.workType == 1 || record.workType == 2 || record.workType == 3) &&
          (record.orderInfo.orderSource == 1 || (record.orderInfo.orderSource == 2 && record.orderInfo.channelOrderMaintenance == 2))) ||
          (record.workType == 3 && record.orderInfo.orderSource == 2 && record.orderInfo.channelOrderMaintenance == 1)) &&
        switchTipOpen.value &&
        record.isWorkOperator == 1 &&
        record.workOperatorId &&
        adminEmployeeId.value &&
        record.workSonStatus != 31,
      method: (record) => {
        // uni.navigateTo({
        //   url: './form/refusePage?record=' + JSON.stringify(record)
        // })
        refuseModalRef.value.open(record)
      },
    },
    {
      label: '去处理', //1 ok  2ok   3ok
      permission: 'svmsapp:workOrder.handle',
      show: (record) =>
        switchTipOpen.value &&
        adminEmployeeId.value &&
        record.workSonStatus != 31 &&
        record.status == 3 &&
        record.isWorkOperator == 1 &&
        (record.orderInfo.orderSource == 1 ||
          (record.orderInfo.orderSource == 2 && record.orderInfo.channelOrderMaintenance == 2) ||
          (record.orderInfo.orderSource == 2 && record.orderInfo.channelOrderMaintenance == 1 && record.workType == 3 && record.carId)),
      method: (record) => {
        if (record.workType == 1) {
          // 交
          handle(record, 1)
        } else if (record.workType == 2) {
          // 还
          handle(record, 2)
        } else {
          // 换
          handle(record, 3)
        }
      },
    },
    {
      label: '完成交车',
      permission: 'svmsapp:workOrder.giveCar',
      show: (record) =>
        adminEmployeeId.value &&
        record.workSonStatus != 31 &&
        record.status == 4 &&
        record.isWorkOperator == 1 &&
        record.workType == 1 &&
        (record.orderInfo.orderSource == 1 || (record.orderInfo.orderSource == 2 && record.orderInfo.channelOrderMaintenance == 2)),
      method: (record) => {
        var otherParams = {
          giveStaffId: record.workOperatorId,
          giveStaffName: record.workOperatorName,
          outCarMileage: record.outCarMileage,
          outCarOil: record.outCarOil,
        }
        if (record.orderInfo.orderType == 1) {
          uni.navigateTo({
            url:
              '/pages/work/workOrder/form/shortOrder/give-car?id=' +
              record.refId +
              '&workId=' +
              record.id +
              '&otherParam=' +
              JSON.stringify(otherParams),
          })
        } else {
          uni.navigateTo({
            url:
              '/pages/work/workOrder/form/longOrder/give-car?id=' +
              record.refId +
              '&workId=' +
              record.id +
              '&otherParam=' +
              JSON.stringify(otherParams),
          })
        }
      },
    },
    {
      label: '完成取车',
      permission: 'svmsapp:workOrder.returnCar',
      show: (record) =>
        adminEmployeeId.value &&
        record.workSonStatus != 31 &&
        record.workSonStatus != 41 &&
        record.status == 4 &&
        record.isWorkOperator == 1 &&
        record.workType == 2 &&
        (record.orderInfo.orderSource == 1 || (record.orderInfo.orderSource == 2 && record.orderInfo.channelOrderMaintenance == 2)),
      method: (record) => {
        var otherParams = {
          returnStaffId: record.workOperatorId,
          returnStaffName: record.workOperatorName,
        }
        if (record.orderInfo.orderType == 1) {
          uni.navigateTo({
            url:
              '/pages/work/workOrder/form/shortOrder/return-car?id=' +
              record.refId +
              '&workId=' +
              record.id +
              '&otherParam=' +
              JSON.stringify(otherParams),
          })
        } else {
          uni.navigateTo({
            url:
              '/pages/work/workOrder/form/longOrder/return-car?id=' +
              record.refId +
              '&workId=' +
              record.id +
              '&otherParam=' +
              JSON.stringify(otherParams),
          })
        }
      },
    },
    {
      label: '完成换车',
      permission: 'svmsapp:workOrder.changeCar',
      show: (record) =>
        adminEmployeeId.value &&
        record.workSonStatus != 31 &&
        record.workSonStatus != 42 &&
        record.status == 4 &&
        record.isWorkOperator == 1 &&
        record.workType == 3,
      method: (record) => {
        var otherParams = {
          replaceStaffId: record.workOperatorId,
          replaceStaffName: record.workOperatorName,
          outCarMileage: record.outCarMileage,
          outCarOil: record.outCarOil,
          carSource: record.carSource,
          carId: record.carId,
          carLicenseNo: record.carLicenseNo,
          carModelId: record.carModelId,
          carModelName: record.carModelName,
          expectEndTime: record.expectEndTime,
        }
        if (record.orderInfo.orderType == 1) {
          uni.navigateTo({
            url:
              '/pages/work/workOrder/form/shortOrder/change-car?id=' +
              record.refId +
              '&workId=' +
              record.id +
              '&otherParam=' +
              JSON.stringify(otherParams),
          })
        } else {
          uni.navigateTo({
            url:
              '/pages/work/workOrder/form/longOrder/change-car?id=' +
              record.refId +
              '&workId=' +
              record.id +
              '&otherParam=' +
              JSON.stringify(otherParams),
          })
        }
      },
    },
    {
      label: '排车', //ok
      permission: 'svmsapp:workOrder.platoonCar',
      show: (record) =>
        switchTipOpen.value &&
        record.workSonStatus != 31 &&
        adminEmployeeId.value &&
        record.workType == 1 &&
        (((record.orderInfo.orderSource == 1 || (record.orderInfo.orderSource == 2 && record.orderInfo.channelOrderMaintenance == 2)) &&
          ((record.status == 1 && isSiteCarHouseKeep.value == 1) ||
            (record.status == 2 && record.workOperatorId && isSiteCarHouseKeep.value == 1) ||
            (record.status == 3 && record.isWorkOperator == 1))) ||
          (record.orderInfo.orderSource == 2 &&
            record.orderInfo.channelOrderMaintenance == 1 &&
            record.status == 1 &&
            isSiteCarHouseKeep.value == 1)) &&
        [10].includes(record.orderInfo.orderStatus),
      method: (record) => {
        platoonCarFn(record)
      },
    },
    {
      label: '改排', //ok
      permission: 'svmsapp:workOrder.platoonCarChange',
      show: (record) =>
        switchTipOpen.value &&
        record.workSonStatus != 31 &&
        adminEmployeeId.value &&
        record.workType == 1 &&
        (((record.orderInfo.orderSource == 1 || (record.orderInfo.orderSource == 2 && record.orderInfo.channelOrderMaintenance == 2)) &&
          ((record.status == 1 && isSiteCarHouseKeep.value == 1) ||
            (record.status == 2 && record.workOperatorId && isSiteCarHouseKeep.value == 1) ||
            (record.status == 3 && record.isWorkOperator == 1))) ||
          (record.orderInfo.orderSource == 2 &&
            record.orderInfo.channelOrderMaintenance == 1 &&
            record.status == 1 &&
            isSiteCarHouseKeep.value == 1)) &&
        [100].includes(record.orderInfo.orderStatus),
      method: (record) => {
        platoonCarFn(record)
      },
    },
    {
      label: '车辆入库', //ok
      permission: 'svmsapp:workOrder.backWarehousing',
      show: (record) =>
        record.isWorkOperator == 1 &&
        record.status == 4 &&
        (((record.orderInfo.orderSource == 1 || (record.orderInfo.orderSource == 2 && record.orderInfo.channelOrderMaintenance == 2)) &&
          (record.workType == 2 || record.workType == 3)) ||
          (record.orderInfo.orderSource == 2 && record.orderInfo.channelOrderMaintenance == 1 && record.workType == 3)) &&
        record.workSonStatus != 31 &&
        adminEmployeeId.value &&
        (record.workSonStatus == 41 || record.workSonStatus == 42),
      method: (record) => {
        uni.navigateTo({
          url: './form/carWarehousing?record=' + JSON.stringify(record) + '&type=add',
        })
      },
    },
    {
      label: '修改入库信息', //ok
      permission: 'svmsapp:workOrder.editBackWarehousing',
      show: (record) =>
        switchTipOpen.value &&
        record.isWorkOperator == 1 &&
        adminEmployeeId.value &&
        record.workSonStatus != 31 &&
        (record.orderInfo.orderSource == 1 || (record.orderInfo.orderSource == 2 && record.orderInfo.channelOrderMaintenance == 2)) &&
        record.status == 5 &&
        (record.workType == 2 || record.workType == 3),
      method: (record) => {
        uni.navigateTo({
          url: './form/carWarehousing?record=' + JSON.stringify(record) + '&type=edit',
        })
      },
    },
    {
      label: '关闭工单', //ok
      permission: 'svmsapp:workOrder.closeWork',
      show: (record) =>
        record.isWorkOperator == 1 &&
        adminEmployeeId.value &&
        record.workSonStatus != 31 &&
        record.status == 4 &&
        (record.orderInfo.orderStatus == -100 || record.orderInfo.orderStatus == -1000) &&
        (((record.orderInfo.orderSource == 1 || (record.orderInfo.orderSource == 2 && record.orderInfo.channelOrderMaintenance == 2)) &&
          (record.workType == 1 || record.workType == 2 || record.workType == 3)) ||
          (record.orderInfo.orderSource == 2 && record.orderInfo.channelOrderMaintenance == 1 && record.workType == 3)),
      method: (record) => {
        // uni.navigateTo({
        //   url: './form/closePage?record=' + JSON.stringify(record)
        // })
        // console.log(record)
        closeModalRef.value.open(record.id)
      },
    },
    {
      label: '添加用户缴费', //ok
      permission: 'svmsapp:workOrder.addFees',
      show: (record) =>
        adminEmployeeId.value &&
        record.isWorkOperator == 1 &&
        record.workSonStatus != 31 &&
        (((record.orderInfo.orderSource == 1 || (record.orderInfo.orderSource == 2 && record.orderInfo.channelOrderMaintenance == 2)) &&
          (record.status == 3 || record.status == 4 || record.status == 5)) ||
          (record.orderInfo.orderSource == 2 &&
            record.orderInfo.channelOrderMaintenance == 1 &&
            ((record.status == 5 && (record.workType == 1 || record.workType == 2)) ||
              ((record.status == 3 || record.status == 4 || record.status == 5) && record.workType == 3)))),
      method: (record) => {
        if (record.orderInfo.orderType == 2) {
          uni.navigateTo({ url: '/pages/order/long-order/add-fees?id=' + record.refId + '&workOrderId=' + record.id })
        }
        if (record.orderInfo.orderType == 1) {
          uni.navigateTo({ url: '/pages/order/short-order/add-fees?id=' + record.refId + '&workOrderId=' + record.id })
        }
      },
    },
    {
      label: '添加备注',
      permission: 'svmsapp:workOrder.addremark',
      method: (record) => {
        let { orderInfo:{ orderType, id } } = record
        uni.navigateTo({ url: `/pages/order/${orderType == 1 ? 'short-order' : 'long-order'}/add-remark?id=${id}` })
      },
    },
    {
      label: '添加报销单',
      permission: 'svmsapp:workOrder.addReimbursement',
      show: (record) =>
        adminEmployeeId.value &&
        record.isWorkOperator == 1 &&
        record.workSonStatus != 31 &&
        record.showPaymentForm == 1 &&
        (((record.orderInfo.orderSource == 1 || (record.orderInfo.orderSource == 2 && record.orderInfo.channelOrderMaintenance == 2)) &&
          (record.status == 3 || record.status == 4 || record.status == 5 || record.status == 6)) ||
          (record.orderInfo.orderSource == 2 &&
            record.orderInfo.channelOrderMaintenance == 1 &&
            (((record.status == 5 || record.status == 6) && (record.workType == 1 || record.workType == 2)) ||
              ((record.status == 3 || record.status == 4 || record.status == 5 || record.status == 6) && record.workType == 3)))),
      method: (record) => {
        var costParams = {
          id: record.id, //工单id
          workCode: record.workCode, //工单号
          workType: record.workType, //工单类型
          workTypeName: record.workTypeName, //工单类型名称
          refType: record.refType, //关联订单类型 1 短租  2长租
          refId: record.refId, //订单id
          refCode: record.refCode, //关联订单号
          siteId: record.siteId, //归属门店
          siteName: record.siteName, //归属门店名称
          memberName: record.orderInfo.memberName, //承租人姓名
          memberPhone: record.orderInfo.memberPhone, //承租人电话
        }
        uni.navigateTo({
          url: '/pages/operate-cost/apply-form/index?costParams=' + JSON.stringify(costParams),
        })
      },
    },
    {
      label: '添加付款单',
      permission: 'svmsapp:workOrder.addPay',
      show: (record) =>
        adminEmployeeId.value &&
        record.isWorkOperator == 1 &&
        record.workSonStatus != 31 &&
        record.showPaymentForm == 1 &&
        (((record.orderInfo.orderSource == 1 || (record.orderInfo.orderSource == 2 && record.orderInfo.channelOrderMaintenance == 2)) &&
          (record.status == 3 || record.status == 4 || record.status == 5 || record.status == 6)) ||
          (record.orderInfo.orderSource == 2 &&
            record.orderInfo.channelOrderMaintenance == 1 &&
            (((record.status == 5 || record.status == 6) && (record.workType == 1 || record.workType == 2)) ||
              ((record.status == 3 || record.status == 4 || record.status == 5 || record.status == 6) && record.workType == 3)))),
      method: (record) => {
        var costParams = {
          id: record.id, //工单id
          workCode: record.workCode, //工单号
          workType: record.workType, //工单类型
          workTypeName: record.workTypeName, //工单类型名称
          refType: record.refType, //关联订单类型 1 短租  2长租
          refId: record.refId, //订单id
          refCode: record.refCode, //关联订单号
          siteId: record.siteId, //归属门店
          siteName: record.siteName, //归属门店名称
          memberName: record.orderInfo.memberName, //承租人姓名
          memberPhone: record.orderInfo.memberPhone, //承租人电话
        }
        uni.navigateTo({
          url: '/pages/operate-cost/pay-form/index?costParams=' + JSON.stringify(costParams),
        })
      },
    },
    {
      label: '申请改派', //ok
      permission: 'svmsapp:workOrder.applyReassignment',
      show: (record) =>
        switchTipOpen.value &&
        adminEmployeeId.value &&
        record.workSonStatus != 31 &&
        record.status == 3 &&
        record.isWorkOperator == 1 &&
        (record.orderInfo.orderSource == 1 ||
          (record.orderInfo.orderSource == 2 && record.orderInfo.channelOrderMaintenance == 2) ||
          (record.orderInfo.orderSource == 2 && record.orderInfo.channelOrderMaintenance == 1 && record.workType == 3)),
      method: (record) => {
        uni.navigateTo({
          url: './form/applyReassignmentPage?record=' + JSON.stringify(record),
        })
      },
    },
    {
      label: '审核改派', //ok
      permission: 'svmsapp:workOrder.reviewReassignment',
      show: (record) =>
        switchTipOpen.value &&
        isSiteCarHouseKeep.value == 1 &&
        record.isHousekeepRole == 1 &&
        record.status == 3 &&
        record.workSonStatus == 31 &&
        (((record.orderInfo.orderSource == 1 || (record.orderInfo.orderSource == 2 && record.orderInfo.channelOrderMaintenance == 2)) &&
          (record.workType == 1 || record.workType == 2 || record.workType == 3)) ||
          (record.orderInfo.orderSource == 2 && record.orderInfo.channelOrderMaintenance == 1 && record.workType == 3)),
      method: (record) => {
        uni.navigateTo({
          url: './form/reviewReassignment?record=' + JSON.stringify(record),
        })
      },
    },
    {
      label: '生成电子合同',
      permission: 'svmsapp:workOrder.signOrder.handContract',
      show: (record) => [3, 4, 5].includes(record.status),
      method: (record) => {
        handleGenerateContract(record)
      },
    },
    {
      label: '合同记录',
      permission: 'svmsapp:workOrder.signOrder',
      show: (record) => [3, 4, 5].includes(record.status),
      method: (record) => {
        // 组件中定义：2:短租,3：长租
        let url = `./detail/index?tab=2&associationorderTab=3&workOrderId=${record.id}&orderId=${record.refId}&workCode=${record.workCode}&orderType=${record.orderInfo.orderType}&status=${record.status}`
        toDetails(record, url)
      },
    },
  ])

  // 更新用户信息 取权限用
  const updateUserInfo = () => {
    updateUser({}).then((res) => {
      // console.log('用户信息', res)
      userInfoMsg.value = res.result

      switchTipOpen.value = res.result.carHouseKeepOpen == 0 ? false : true
      isSiteCarHouseKeep.value = res.result.isSiteCarHouseKeep //1是车管家账号
      adminEmployeeId.value = res.result.employeeId //空是admin

      if (!userInfoMsg.value.employeeId) {
        // admin账号
        if (userInfoMsg.value.isSiteCarHouseKeep == 1) {
          isActived.value = 7
        } else {
          isActived.value = 6
        }
        queryParam.value = {}
      } else if (userInfoMsg.value.isSiteCarHouseKeep == 1) {
        // 车管家账号 添加待指派tab并选中
        tablists.value.unshift({ label: '待指派', value: '1', prop: 'waitAssignedCount' })
        isActived.value = 0
        queryParam.value = {
          statusList: ['1'],
        }
      } else if (userInfoMsg.value.isSiteCarHouseKeep == 0) {
        // 负责人账号
        isActived.value = 0
        queryParam.value = {
          statusList: ['2'],
        }
      } else {
        // console.log('默认到待指派')
        isActived.value = 0
        queryParam.value = {
          statusList: ['1'],
        }
      }
      // 带了跳转状态时候
      if (queryStatusList.value) {
        tablists.value.forEach((i, index) => {
          if (queryStatusList.value == i.value) {
            isActived.value = queryStatusList.value == 3 ? index - 1 : index
            queryParam.value.statusList = [queryStatusList.value]
          }
          // return false
        })
      }
      // 带了跳转工单号时候
      if (codeAll.value) {
        nextTick(() => {
          queryParam.value.codeAll = codeAll.value
          isActived.value = tablists.value.length - 1
          queryParam.value.statusList = undefined
          resetRefresh()
          getCountData(queryParam.value)
        })
      } else {
        resetRefresh()
        getCountData(queryParam.value)
      }
    })
  }

  onLoad((option) => {
    console.log('option', option)
    if (option.statusList) {
      queryStatusList.value = undefined
      queryStatusList.value = option.statusList
    }
    if (option.workOrderCode) {
      codeAll.value = option.workOrderCode
      updateUserInfo()
    } else {
      updateUserInfo()
    }
    // 刷新列表
    uni.$on('refreshData', (type) => {
      if (type == 'createChangeCarWorkOrder') {
        current.value = -1
        isActived.value = -1
        queryParam.value.workSonStatus = undefined
        nextTick(() => {
          current.value = 3
          queryParam.value.workTypeList = [3]
          tablists.value.forEach((i, index) => {
            if (i.label == '待处理') {
              isActived.value = index
              queryParam.value.statusList = [tablists.value[index].value]
            }
          })
          resetRefresh()
          getCountData(queryParam.value)
        })
      } else {
        hotUpdate()
      }
    })
    uni.$on('carStock:selectCarOk', () => {
      hotUpdate()
    })
    uni.$on('operateSuccess', () => {
      hotUpdate()
    })

    // #ifdef APP-PLUS
    plus.screen.lockOrientation('portrait-primary')
    //#endif
  })
</script>

<style lang="scss" scoped>
  .container {
    height: 100vh;
  }
  .order-tag-list {
    padding: 14rpx 0 0px;
    line-height: 1;
    .order-tag-item {
      height: 32rpx;
      line-height: 32rpx;
      box-sizing: content-box;
      display: inline-block;
      font-size: 24rpx;
      padding: 0rpx 12rpx;
      border-radius: 18rpx;
      border: 2rpx solid #f5d6a2;
      color: #e59b1c;
      margin-right: 20rpx;
    }
  }
  .card-tlt {
    width: calc(100% + 48rpx);
    margin-left: -24rpx;
    margin-top: -2rpx;
    height: 80rpx;
    background-image: linear-gradient(to right, #fff3d5, #ffffff);
    border-radius: 4rpx 4rpx 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .tag {
      display: inline-block;
      height: 40rpx;
      padding: 0 16rpx;
      border-radius: 40rpx;
      background: #ff7d00;
      font-size: 24rpx;
      font-weight: 500;
      line-height: 40rpx;
      color: #fff;
      margin-left: 24rpx;
    }

    .tlt {
      color: #191c27;
      font-size: 32rpx;
      font-weight: 600;
      flex: 1;
      margin: 24rpx;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    .sta {
      color: #e59b1c;
      font-size: 28rpx;
      font-weight: 400;
      margin-right: 24rpx;
    }
  }

  .order_no {
    color: #3072f6;
    font-weight: 400;
  }

  .more_icon {
    width: 10rpx !important;
    height: 22rpx !important;
    margin-left: 16rpx;
    margin-top: -8rpx;
  }

  .work_types {
    margin-top: 1px;
    width: 100%;
    background: #fff;
    padding: 24rpx 32rpx 0;
    margin-bottom: -1px;
    z-index: 10;
  }

  .types_i {
    width: calc(100% - 64rpx);
    margin: 32rpx;
    height: 72rpx;
    background: #f7f8fa;
    border-radius: 4rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .ve-search {
    border-top: 0 !important;
  }

  .types_i_label {
    position: relative;
    text-align: center;
    font-size: 28rpx;
    color: #55585f;
    width: 25%;
    font-weight: 400;
  }

  .types_i_label_back {
    position: absolute;
    width: 168rpx;
    height: 56rpx;
    background: #fff;
    border-radius: 4rpx;
  }

  .top_tabs_active {
    color: #3072f6;
    font-weight: 600;
  }

  .manager-tabs {
    background-color: #fff;
  }

  .record-list {
    padding: 24rpx 24rpx;
  }

  .errMsg-box {
    font-size: 28rpx;
    font-weight: 400;
    color: #f53f3f;
    padding-bottom: 32rpx;
  }

  .icon-class {
    font-size: 32rpx;
    margin-right: 8rpx;
    display: inline;
  }

  .no_res {
    color: #f53f3f;
    border: 1rpx solid #f53f3f;
    background: #ffece8;
    padding: 0 16rpx;
    border-radius: 40rpx;
    text-align: center;
    font-size: 24rpx;
  }

  .no_res_reassignment {
    color: #722ed1;
    border: 1rpx solid #722ed1;
    background: #f5e8ff;
    padding: 0 16rpx;
    border-radius: 40rpx;
    text-align: center;
    font-size: 24rpx;
  }

  .get_more {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 30rpx;
    font-weight: 400;

    view:nth-child(1) {
      flex: 1;
      color: #191c27;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
    }

    view:nth-child(2) {
      color: #3072f6;
    }
  }

  .tlts {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    background: #fff;
    padding: 14rpx 16rpx 12rpx;

    .tlt_c {
      margin: 0 16rpx;
      color: #191c27;
      font-weight: 600;
      font-size: 28rpx;
    }

    .tlt_r {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 2rpx 16rpx;
      border: 1rpx solid #1890ff;
      border-radius: 2px;
      background: #dfeeff;

      .icon-img {
        width: 28rpx;
        height: 28rpx;
        margin-right: 8rpx;
      }

      .tlt_name {
        color: #1890ff;
        font-size: 24rpx;
        font-weight: 400;
        cursor: pointer;
      }
    }

    .tags {
      white-space: nowrap;
      width: 100%;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      margin: 2px 0;

      .tags-i {
        margin-right: 16rpx;
        display: inline-block;
        padding: 3rpx 16rpx;
        border: 1rpx solid #dadbdd;
        border-radius: 4rpx;
        color: #55585f;
        font-size: 24rpx;
        text-align: center;
      }

      .tag_active {
        color: #3072f6;
        font-size: 600;
        background: #e0edff;
        border: 1rpx solid #3072f6;
      }
    }
  }

  .filter_title {
    border-top: 1px solid #f7f8fa;
    margin-bottom: -8rpx;
    background: #fff;
    z-index: 10;
    padding: 14rpx 16rpx 0;
  }
</style>
